<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Raxan Cursor Plugin</title>
    <script src="../raxan/startup.js" type="text/javascript">
        html.css('master').css('default/theme');
        html.include('jquery');
        html.include('rich/cursor');
        
        html.ready(function(){
            $('#btnshow, #btnhide').click(function(e){
                var o = $('#box1');
                if (e.target.id=='btnshow') o.cursor("hourglass");
                else o.cursor("hide");
                return false;
            })
            
            $('#box2').cursor("search");
            $('#box3').cursor("busy");
        })
    </script>
</head>

<body>
    <div class="container c30 hlf-pad lightgray">&nbsp;<a href="index.html" title="Back to the Examples Web Page"><img src="images/arrow_left.png" width="16" alt="Menu"/> Examples</a> | Raxan Framework&nbsp;</div>
    <div class="container c30 pad">
        <h1>Cursor Plugin</h1>
        <hr />
        <p>Move you mouse over the boxes to see the cursor change.</p>
        <a id="btnshow" href="#" class="button">Show Hourglass</a>&nbsp;
        <a id="btnhide" href="#" class="button">Hide Hourglass</a>
        <hr class="space"/>

        <div id="box2" class="alert c5 r5 left rtm">
            <h3>I am always <br />Searching...</h3>
        </div>

        <div id="box1" class="success c16 r5 left">
            <h3>Hourglass Cursor</h3>
            Click buttons to show/hide hourglass
        </div>

        <div id="box3" class="info c5 r5 right">
            <h3>I am always <br />Busy...</h3>
        </div>
    </div>
</body>

</html>

